<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .top {
            width: 100%;
            height: 50px;
            padding: 15px;
            color: white;
            display: flex;
            justify-content: space-around;
            background-color: rgb(12, 128, 245);
        }

        .top :first-child {
            flex: 1;
        }

        .bottom {
            width: 100%;
            height: 93%;
            display: flex;
            
        }

        .bottom aside {
            width: 200px;
            text-align: center;
            color: gainsboro;
            background-color: rgb(12, 128, 245);
        }

        .bottom aside p {
            height: 80px;
            line-height: 80px;
        }

        .bottom aside .active {
            color: white;
            background-color: rgba(172, 255, 47, 0.734);
        }

        .bottom main {
            width: 100%;
            padding: 35px 30px;
            /* overflow-y: scroll; */
        }

        .bottom main .findBorder {
            display: flex;
            margin-bottom: 20px;
        }

        .bottom main .findBorder input {
            width: 350px;
            height: 40px;
            border-radius: 50px;
            padding: 15px;
            margin-right: 30px;
            border: 1px solid gainsboro;
        }

        .bottom main .findBorder .find {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: white;
            border-radius: 10px;
            background-color: rgb(68, 224, 56);
        }

        .bottom main .add {
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: white;
            border-radius: 10px;
            margin-bottom: 10px;
            background-color: rgb(68, 224, 56);
        }

        .bottom main table {
            width: 1000px;
            text-align: center;
        }

        .bottom main table thead tr th {
            height: 30px;
            padding: 10px;
        }

        .bottom main table tbody tr td {
            height: 30px;
            padding: 5px;
            border-top: 1px solid gainsboro;
        }

        .bottom main table tbody tr td:nth-child(6) span {
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            color: white;
            border-radius: 10px;
            background-color: rgb(68, 224, 56);
        }

        .bottom main table tr .active {
            text-align: left;
        }

        .bottom main table tfoot tr td {
            padding-left: 450px;
            padding-top: 5px;
        }

        .bottom main table tfoot tr td button {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            margin-right: 20px;
            border: 1px solid gainsboro;
        }
    </style>
</head>

<body>
    <div class="top">
        <span>9466云专题</span>
        <span class="iconfont icon-yonghu
        ">&emsp;龙猫(9466云专题)</span>
    </div>
    <div class="bottom">
        <aside>
            <p class="iconfont icon-home">&emsp;首页</p>
            <p class="iconfont icon-zhuantiguanli">&emsp;专题</p>
            <p class="iconfont icon-yonhu active">&emsp;用户</p>
            <p class="iconfont icon-shezhi">&emsp;设置</p>
            <p class="iconfont icon-xitongrizhi">&emsp;日志</p>
        </aside>
        <main>
            <div class="findBorder">
                <input type="text" placeholder="搜索用户">
                <div class="find">搜索</div>
            </div>
            <div class="iconfont icon-tianjia add">&emsp;添加用户</div>
            <table>
                <thead>
                    <tr>
                        <th class="active">邮箱(账户)</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>所属组</th>
                        <th>管理员</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td class="active">2jhdho@sink.com</td>
                        <td>码云</td>
                        <td>123456895645</td>
                        <td>编辑部</td>
                        <td>是</td>
                        <td>
                            <span>正常</span>
                        </td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            &emsp;
                            <span class="iconfont icon-shanchu
                            "></span>
                        </td>
                    </tr> -->
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7">
                            <button class="prev">上一页</button>
                            <button class="next">下一页</button>
                        </td>
                    </tr>
                </tfoot>
            </table>

        </main>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<!-- <script src="/mock.js"></script> -->
<script>
    function ajax(method, url, params) {
        function objToSearchString(obj) {
            let str = ''
            for (const key in obj) {
                str += `${key}=${obj[key]}&`
            }
            return str.slice(0, str.length - 1)
        }
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest()
            xhr.open(method, method == 'get' ? url + '?' + objToSearchString(params) : url)
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    resolve(JSON.parse(xhr.responseText))
                }
            }
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send(method == 'get' ? null : objToSearchString(params))
        })
    }
    
    function render(data) {
        document.querySelector('.bottom main table tbody').innerHTML = data.map((item) => {
            return `
                    <tr>
                        <td class="active">${item.email}</td>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.group}</td>
                        <td>${item.admin?'是':'否'}</td>
                        <td>
                            <span>${item.status?'正常':'异常'}</span>
                        </td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            &emsp;
                            <span class="iconfont icon-shanchu
                            "></span>
                        </td>
                    </tr>
                    `
        }).join('')
    }
    
    let data=Mock.mock({
            "list|10": [
                {
                    "email":"@email",
                    "name":"@cname",
                    "phone|13000000000-19999999999":1,
                    "group|+1":['编辑组','开发组','测试组'],
                    "admin|1":true,
                    "status|1":true
                }
            ]
        })
    render(data.list)
</script>